<script>
    import List from '../components/list.svelte';
    import Btn from '../components/btn.svelte';
    import QueryBar from '../components/queryBar.svelte';
    import Paging from '../components/paging.svelte';
    import { onMount } from 'svelte';
    import { Post } from '../lib/net.js';
    import { Orders,OrderCancelDelegate,AgentList,SearchAgent } from '../api.js';
    import { CoinType,OrderType,OrderState } from '../conf.js';
    import Query from '../model/query.js';
    import Event from '../model/event.js';
    import moment from 'moment';
    import BtnSmall from '../components/btn-small.svelte';
    import { IsAdmin } from '../lib/token.js';

    let info = {
        total: 0,
        many: 0,
        less: 0,
        users: 0,
        promise:0
    }
    let objCointype = {
        0: 'btc',
        1: 'eth',
        2: 'eos',
        3: 'etc',
        4: 'ltc',
        5: 'bch',
        6: 'xrp',
        7: 'bsv',
        8: 'dash',
        9: 'ht'
    }
    let data = {title:["UID", "姓名", "手机号","邮箱", "代理人","币种", "方向","杠杆", "委托张数", "止盈", "止损",  "盈亏", "手续费", "委托价格","委托时间","状态"],data:[]}

    var query = new Query();

    // 0 持仓 1 委托 2 平仓

    onMount(async ()=>{
        getList();
    });

    async function getList(e){
        if (e) {
            query.start = e.detail.start
            query.end = e.detail.end
            if (e.detail.types !== 1) {
                let ret = await Post(SearchAgent, {
                    type: e.detail.types,
                    condition: query.condition,
                });
                query.condition = "";
                query.admin = ret
                if(query.admin == -100) return
            }else {
                query.admin = null
            }
        }
       let ret = await Post(Orders + "/0",query)
       info.total = ret.total;
       info.many = ret.Extra.many;
       info.promise=ret.Extra.promise;
       info.less = ret.Extra.down;
       info.users = ret.Extra.users;
       query.total = ret.total;
       query.page = ret.page;
       let _data = [];
       for(let item of ret.list) {

          let _e = new Event("canceldelegate","is-danger is-small",)

           if (!item.order.high) {
               item.order.high=0.00
           }
           if (!item.order.low) {
               item.order.low=0.00
           }
           if (!item.order.profit) {
               item.order.profit=0.00
           }
          let arr = [
              item.order.uid,
              item.user_info.name,
              item.user.phone,
              item.user.email,
              item.user.inviteCode || "",
              objCointype[item.order.coin_type],
              OrderType[item.order.buy_type],
              item.order.multiple + "X",
              item.order.count,
              item.order.high,
              item.order.low,
              item.order.income,
              "-" + item.order.fee,
              item.order.open,
              item.order.show_open_date,
              IsAdmin() ? `<button class="button is-danger is-small" data-id="${item.tid}" on:click>撤销委托</button>`: "" ];
          arr.href="/user/contract/detail?tid=" + item.order.tid;
          arr.handler = cancel;
          arr.id = item.order.tid;
          _data.push(arr);
       }
       data.data = _data;
    }

    async function cancel(){
        event.stopPropagation();

        if(!confirm("确定要取消委托?")) return

        let id = this.getAttribute("data-id");
        await Post(OrderCancelDelegate,{id});
        getList();
    }

    function setPage(page){
        query.page = page;
        getList();
    }

</script>

<div class="view">
    <div style="display: flex;flex-direction: row;align-items: center;width: 99%;margin: 5px;height: 60px;background-color: white;margin-top: 5px"
         class="borderRadius4">
        <span style="color: #20222A;margin: 20px">
            委托订单
        </span>
    </div>
    <!--//-->
    <div class=" borderRadius4 container">
        <div class="columns rowReverse">
            <div class="column is-4">
                <!--//-->
                <div class="rowNumCenter">
                    <span class="left1">委托单数：</span>
                    <span class="mid1" style="color:forestgreen">{info.total}</span>
                    <span class="left1">单</span>
                </div>
                <!--//-->
                <div class="rowNumCenter">
                    <span class="left1">占用保证金：</span>
                    <span class="mid1" style="color:forestgreen">{info.promise}</span>
                    <span class="left1">USDT</span>
                </div>

            </div>
        </div>
    </div>
    <div class="container">
        <QueryBar query={query} on:message={getList}/>
    </div>
    <div class="container" style="width: 100%;overflow-x: auto;margin-top: -10px">

        <List data={data} handler={cancel}/>
    </div>
    <div class="container rowReverse">
        {#if query.total !== 0}
        <Paging page={query} handler={setPage}/>
        {/if}
    </div>
</div>

<style>
    .borderRadius4{
        border-radius: 4px;
    }
    .container {
        margin:20px 5px;
    }
    .info {
        background: #fff;
    }
    .rowNumCenter{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        font-size: 12px;
    }
</style>
